<template>
    <div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            prop="id"
            label="评论ID"
            width="180">
            </el-table-column>
            <el-table-column
            prop="store_name"
            label="商品信息"
            width="180">
            <template slot-scope="scope">
                <div>
                    <img class="img" :src='scope.row.image' >
                    {{scope.row.store_name}}
                </div>
            </template>
            </el-table-column>
            <el-table-column
            prop="account"
            label="用户名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="service_score"
            label="评分"
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="评价内容"
            width="400">
            <template slot-scope="scope">
                <div>
                    {{scope.row.comment}}
                    <div class="imgBoxs" v-if="scope.row.pics!==[]">
                        <img class="img" :src="scope.row.pics[0]"/>
                         <img class="img" :src="scope.row.pics[1]"/>
                    </div>
                </div>
            </template>
            </el-table-column>
            <el-table-column
            prop="merchant_reply_content"
            label="回复内容"
            width="180">
            </el-table-column>
            <el-table-column
            prop="add_time"
            label="评价时间"
            width="180">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">回复</el-button>
                <el-button @click="deleFun(scope.row)" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @current-change="handleCurrentChange"
            @prev-click="prevclick"
            @next-click="nextclick"
            :current-page="page"
            :page-size="pagelimimt"
            layout="total, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <Reply :reply-arr='replyarr' @listarr="listArr"></Reply>
    </div>
</template>
<script>
import {getList,dellist} from '../api/index'
import Reply from '../components/reply'
export default {
    props:['raDio'],
    components:{
        Reply
    },
    data() {
        return {
            tableData: [],
            count:0,
            page: 1,//当前页数
            pagelimimt:15,//每页条数
            replyarr:{
               dialogFormVisible:false, 
               content:'',
               id:''
            },
            product_id:0,
            is_reply:'',
            data:'',
            account:'',
            store_name:''
        }
    },
    created(){
        this.list()
    },
    watch:{
        "raDio.radio1":function(val,oldVal) {
            this.data=val
            this.list()
        },
        "raDio.values":function(val,oldVal) {
            this.is_reply=val
            this.list()
        },
        "raDio.input":function(val,oldVal) {
            this.store_name=val
            this.list()
        },
        "raDio.inputs":function(val,oldVal) {
            this.account=val
            this.list()
        },
        "raDio.huidiao":function(val,oldVal) {
            this.list()
        }

    },
    methods: {
        // 回复返回数据
        listArr(val){
            this.replyarr.dialogFormVisible=val.dialogFormVisible
            this.list()
        },
        // 下一页
        nextclick(val){
            this.currentPage4=val
            this.list()
        },
        // 上一页
        prevclick(val){
            this.currentPage4=val
            this.list()
        },
        //   当前页码发生改变
        handleCurrentChange(val) {
            this.currentPage4=val
            this.list()
        },
        //   删除
        deleFun(row){
            let params = {
                id:row.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
                .then(() => {
                    dellist(params).then((res)=>{
                    if(res.data.status==200){
                        this.list()
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            duration:1000
                        });
                    }else{
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                            duration:1000
                        });
                    }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        duration:1000
                    });          
                });
            
        },
        // 回复
        handleClick(row) {
            this.replyarr.dialogFormVisible=true
            this.replyarr.id=row.id
            this.replyarr.content=''
        },
        //   获取数据
        list(){
            getList({page:this.page,limit:this.pagelimimt,product_id:this.product_id,is_reply:this.is_reply,data:this.data,account:this.account,store_name:this.store_name}).then((res)=>{
                if(res.data.status===200){
                    this.tableData=res.data.data.list
                    this.count=res.data.data.count;
                }else{
                    this.$router.push('/login')
                }
            })
        }

    },
}
</script>
<style lang="scss" scoped>
.img{
    width: 50px;
    height: 50px;
    display: block;
}
.imgBoxs{
    display: flex;
}
</style>